<template>
  <el-card>
    <PlusForm
      v-model="state"
      :columns="columns"
      :rules="rules"
      :row-props="{ gutter: 20 }"
      @change="handleChange"
      @submit="handleSubmit"
      @submit-error="handleSubmitError"
      @reset="handleReset"
    />
  </el-card>
</template>

<script lang="ts" setup>
import type { FieldValues, PlusColumn } from '@wlydfe/pro-ui'

const state = ref<FieldValues>({{DEFAULT_FORM_STATE}})

const rules = {{DEFAULT_FORM_RULES}}

const columns: PlusColumn[] = {{DEFAULT_FORM_COLUMNS}}

const handleChange = (values: FieldValues) => {
  console.log(values, 'change')
}

const handleSubmit = (values: FieldValues) => {
  console.log(values, 'Submit')
}

const handleSubmitError = (err: any) => {
  console.log(err, 'err')
}

const handleReset = () => {
  console.log('handleReset')
}
</script>
